<template>
  <div id="Login">
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 登陆表单 -->
      <el-form ref="LoginForm" :rules="LoginFormRules" :model="LoginForm" label-width="0px" class="login_form_box">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="LoginForm.username" placeholder="请输入用户名" clearable minlength="3" maxlength="10" prefix-icon="el-icon-user-solid">1</el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="LoginForm.password" placeholder="请输入密码" clearable minlength="6" maxlength="15" type="password" prefix-icon="el-icon-s-cooperation" suffix-icon="el-icon-view">2</el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="bens">
          <el-button type="primary" size="small" @click="Login('LoginForm')">登陆</el-button>
          <el-button type="info" size="small" @click="RestFrom('LoginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  /* 组件 */
  components: {},
  data() {
    return {
      // 登陆表单
      LoginForm: {
        username: 'admin', // 用户名
        password: '123456' // 密码
      },
      // 表单验证
      LoginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码6-15位之间', trigger: 'blur' }
        ]
      }
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},
  /* 观察Vue实例上的数据变动 */
  watch: {},
  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},
  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},
  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 重置表单
    RestFrom(formName) {
      this.$refs[formName].resetFields()
    },
    // 登陆1.2.1
    Login(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          // 解构 对象属性：要赋的值
          const { data: resData } = await this.$http.post('login', this.LoginForm)
          console.log('登陆', resData)
          if (resData.meta.status !== 200) {
            console.log('登陆失败')
            return this.$message.error(resData.meta.msg)
          } else {
            console.log('登陆成功')
            this.$message.success(resData.meta.msg)
            // 将token保存到sessionStorage
            window.sessionStorage.setItem('Token', resData.data.token)
            // 跳转首页  通过编程式导航跳转至首页
            this.$router.push('/home')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
 #Login{
   background: #2b4b6b;
   height: 100%;
   .login_box{
     width: 450px;
     height: 300px;
     background: #fff;
     border-radius: 4px;
     position: absolute;
     left: 50%;
     top: 50%;
    /* 利用css动画使白框居中https://zhuanlan.zhihu.com/p/124706630 */
     transform: translate(-50%, -50%);
     .avatar_box{
       height: 100px;
       width: 100px;
       border: 1px solid #eee;
       background: #fff;
       border-radius: 50%;
       padding: 10px;
       /* // 边框阴影 */
       box-shadow: 0 0 10px #ddd;
       /* // 移动位置 向右移动白盒子一半减去自身的距离，向上移动avatar盒子的一半 */
       position: absolute;
       left: 50%;
       transform: translate(-50%, -50%);
       img{
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background: #eee;
       }
     }
     .login_form_box{
       position: absolute;
       bottom:0;
       width: 100%;
       padding: 0 20px;
       /* // 防止溢出 */
       box-sizing: border-box;
     }
     .bens{
        display: flex;
        justify-content: flex-end;
      }
   }
 }
</style>
